<template>
    <div>
        <el-alert
            type="info"
            :closable="false"
            v-show="form.channel === 'custom'"
            show-icon>
            <p>设置了推广费公式后, 该渠道即刻起的推广费将由公式计算得出.</p>
            <p>注意金额单位为分, 假设一个注册算15元, 公式应为<b>注册*1500</b>, 而不是<b>注册*15</b>.</p>
            <p>充值和权益单位为分, 如果公式中只有充值和权益时无需考虑单位问题.</p>
        </el-alert>
        <el-form ref="form" :rules="form.channel === 'custom' ? rulesCustom : rules" :model="form" :validate-on-rule-change="false" label-width="100px" class="mt-10">
            <el-form-item label="应用渠道" prop="source">
                <select-app-source v-model="form.source" :clearable="false"></select-app-source>
            </el-form-item>
            <el-form-item label="推广渠道" prop="channel">
                <el-select v-model="form.channel" class="filter-item" placeholder="推广渠道" style="width: 160px;">
                    <el-option
                        v-for="(item, index) in options.channels"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="广告主ID" prop="advertiser_id" v-show="form.channel !== 'custom'">
                <el-select filterable v-model="form.advertiser_id" class="filter-item" placeholder="广告主ID" style="width: 250px;">
                    <el-option
                        v-for="item in advertisers"
                        :key="`advertiser_id:${item.id}`"
                        :label="`${item.id}) ${item.name}`"
                        :value="item.id.toString()">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="返点" prop="rebate" v-show="form.channel !== 'custom'">
                <el-input v-model="form.rebate" placeholder="返点"></el-input>
                <span>实际推广费 = 推广费 / 返点</span>
            </el-form-item>
            <el-form-item label="推广费公式" prop="formula" v-show="form.channel === 'custom'">
                <el-input type="textarea" v-model="form.formula" :autosize="{ minRows: 4}" placeholder="例: (充值-权益)*0.7"></el-input>
                <p>
                    可用变量:
                    <el-tag>充值</el-tag>
                    <el-tag>权益</el-tag>
                    <el-tag>注册</el-tag>
                    <el-tag>积分消耗</el-tag>
                    <el-tag>支付通道费</el-tag>
                </p>
                <p>
                    可用方法:
                    <el-tag>+</el-tag>
                    <el-tag>-</el-tag>
                    <el-tag>*</el-tag>
                    <el-tag>/</el-tag>
                </p>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :loading="loading" @click="submit">确定</el-button>
                <el-button @click="cancel">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    props: {
        data: {}
    },
    components: {

    },
    data() {
        return {
            loading: false,
            form: {},
            formDefault: {
                id: '',
                source: '',
                channel: 'kuaishou',
                advertiser_id: '',
                advertiser_name: '',
                rebate: 10000,
                formula: '',
                formula_text: '',
            },
            rules: {
                source: {required: true, message: '请选择渠道', trigger: 'blur',},
                channel: {required: true, message: '请选择推广渠道', trigger: 'blur',},
                advertiser_id: {required: true, message: '请输入广告主ID', trigger: 'blur',},
                rebate: {required: true, message: '请输入返点', trigger: 'blur',},
            },
            rulesCustom: {
                source: {required: true, message: '请选择渠道', trigger: 'blur',},
                channel: {required: true, message: '请选择推广渠道', trigger: 'blur',},
                formula: {
                    required: true,
                    trigger: 'blur',
                    validator: (rule, value, callback) => {
                        if (!value) {
                            callback(new Error('请输入公式'));
                            return;
                        }
                        // 只能包含 充值权益 +-*/
                        let reg = /^[充值权益注册支付通道费积分消耗\(\)\+\-\*\/\d\.]+$/;
                        if (!reg.test(value)) {
                            callback(new Error('公式只能包含 充值权益注册支付通道费积分消耗 +-*/'));
                            return
                        }
                        callback();
                    }
                },
            },
            options: this.$store.state.appSourceCpa.options,
            isCreate: true,
        }
    },
    computed: {
        configs() {
            return this.$store.state.appSourceCpa.configs;
        },
         advertisers() {
             if (!this.form.channel) return [];
             if (this.configs.hasOwnProperty(this.form.channel) && this.configs[this.form.channel].hasOwnProperty('advertisers')) {
                 return this.configs[this.form.channel].advertisers;
             }
             return [];
         }
    },
    watch: {
        data(newVal) {
            this.syncForm();
        },
    },
    methods: {
        getFormAction() {
            return this.isCreate ? 'appSourceCpa/Store' : 'appSourceCpa/Update';
        },
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) return false;
                this.loading = true;
                let form = this.$helper.deepClone(this.form);
                form.rebate *= 10000;
                // 补全advertiser_name
                if(form.advertiser_id) {
                    this.advertisers.map(v => {
                        if (v.id == form.advertiser_id) {
                            form.advertiser_name = v.name;
                        }
                    })
                }

                this.$store.dispatch(this.getFormAction(), form).then(res => {
                    this.$message.success(res.data.message);
                    this.$emit('submit');
                }).finally(() => {
                    this.loading = false;
                });
            });
        },
        cancel() {
            this.$emit('cancel');
        },
        syncForm() {
            this.form = Object.assign({}, this.data.id ? this.data : this.formDefault);
            this.isCreate = this.form.id <= 0;
            this.form.rebate /= 10000;
            this.form.formula = this.form.formula_text;
        },
    },
    created() {
        this.syncForm();
    }
}
</script>

<style lang="scss" scoped>
.item-row {
    margin: 0 0 10px 0;
}
</style>

